<template>
  <div
    :class="{
      'user-list-container': true,
      'charge-active': isEditUsers
    }"
    @click="startEditUsers"
  >
    <div class="users-list">
      <span
        v-for="(user, index) in copiedUserList.slice(0, 3).reverse()"
        :key="index"
        :class="{
          disabled: !isAllowEdit
        }"
        @click="removeUser(user)"
      >
        {{
          isEditUsers
            ? user.name
            : index === copiedUserList.length - 1 || index === 2
            ? user.name[0]
            : ''
        }}
      </span>
    </div>
    <span v-if="isEditUsers && copiedUserList.length > 3" class="collpse">
      +{{ copiedUserList.length - 3 }}
    </span>
    <div v-if="isEditUsers" class="icon-list">
      <i v-if="isAllowEdit" class="iconfont icon-plus" @click.stop="addUser" />
      <i class="iconfont icon-close" @click.stop="storeUsers" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Prop, Watch } from 'vue-property-decorator'
import { Message } from 'element-ui'
import { WorkersList } from '@/interface/Basic'
import { deepClone } from '@/utils/specificFunc'
@Component
class UserList extends Vue {
  @Prop({ required: true }) userList!: WorkersList[]
  @Prop({ default: false }) isAllowEdit!: boolean
  isEditUsers: boolean = false
  copiedUserList: WorkersList[] = []
  @Watch('userList')
  userlist_handler(newVal: WorkersList[]) {
    this.copiedUserList = deepClone(newVal)
  }
  // @Watch('isAllowEdit')
  // allowedit_handler(newVal: boolean) {
  //   this.isAllowEdit = newVal
  // }
  // mounted() {}
  startEditUsers() {
    if (!this.isAllowEdit) {
      // Message({
      //   type: 'warning',
      //   message: '您没有该操作的权限'
      // })
      return
    }
    this.isEditUsers = true
  }
  @Emit()
  addUser() {
    let newUsers: WorkersList[]
    const newUser: WorkersList = {
      name: '用户1',
      position: '',
      avator: ''
    }
    if (!this.copiedUserList.length) newUsers = [newUser]
    else newUsers = [...this.copiedUserList, ...[newUser]]
    this.copiedUserList = newUsers
    return newUsers
  }
  @Emit()
  removeUser(edit_user: WorkersList) {
    if (!this.isEditUsers || !this.isAllowEdit) return this.copiedUserList
    const arr = this.copiedUserList
    if (arr.length === 1) {
      Message({
        message: '任务的关联人员不能为空',
        type: 'warning'
      })
      return
    }
    const idx = arr.findIndex(ele => ele.name === edit_user.name)
    arr.splice(idx, 1)
    this.copiedUserList = arr
    return arr
  }
  storeUsers() {
    this.isEditUsers = false
  }
}
export default UserList
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.user-list-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 2px 0;
  .users-list {
    display: flex;
    flex-direction: row-reverse;
    transition: all 0.2s ease;
    span {
      box-sizing: border-box;
      position: relative;
      width: 25px;
      height: 25px;
      margin-left: -15px;
      text-align: center;
      line-height: 25px;
      border-radius: 50%;
      font-size: 12px;
      color: #ffffff;
      cursor: pointer;
      #color(background-color, --primary-blue-color);
      #shadow-color(1px, 1px, 4px, 0, --primary-shadow-color);
    }
    span::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);
    }
    span:last-child {
      margin: 0;
    }
    span:last-child::after {
      display: none;
    }
  }
}
.charge-active {
  border-radius: 5px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 6px 10px;
  .users-list {
    transition: all 0.2s ease;
    span {
      width: unset;
      min-width: 40px;
      margin-left: 5px;
      padding: 0 20px 0 5px;
      border-radius: 5%;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    span::after {
      content: '';
      width: 10px;
      height: 1px;
      top: 50%;
      right: 5px;
      border-radius: 0;
      background-color: #ffffff;
      transform: translateY(-50%) rotate(45deg);
    }
    span:last-child::after {
      display: block;
    }
    span::before {
      content: '';
      position: absolute;
      display: block;
      width: 10px;
      height: 1px;
      top: 50%;
      right: 5px;
      background-color: #ffffff;
      transform: translateY(-50%) rotate(-45deg);
    }
    .disabled {
      padding-right: 5px;
    }
    .disabled::after,
    .disabled::before,
    .disabled:last-child::after {
      display: none;
    }
  }
  .collpse {
    box-sizing: border-box;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    width: unset;
    margin-left: 5px;
    padding: 0 8px;
    border-radius: 5%;
    white-space: nowrap;
    transition: all 0.2s ease;
    color: #ffffff;
    #color(background-color, --primary-blue-color);
    #shadow-color(1px, 1px, 4px, 0, --primary-shadow-color);
  }
  .icon-list {
    margin-left: 25px;
    i {
      box-sizing: border-box;
      padding: 6px;
      margin: 0 3px;
      border-radius: 50%;
      font-size: 12px;
      transition: all 0.2s ease;
      color: #ffffff;
      #color(background-color, --primary-blue-color);
      #shadow-color(0, 0, 4px, 0, --primary-shadow-color);
    }
    i:hover {
      opacity: 0.8;
    }
  }
}
</style>
